<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		     .html()         无参---功能：获取匹配怨怒苏中第一元素的内容
			                 有参---功能：将陪陪元素集合中所有元素替换为新元素
			 .val()			 无参--功能：表单内元素：input、select生效
										获取表单内元三年中第一元素的内容
							 有参--功能：【设置】表单内元素：input、select生效
										input元素直接显示 value
										select元素不是显示 value
										option 元素中内容:用户显示
										option 元素中value值，
										必须当前select中
										直接赋值：打印select元素对象名称[object Object]
			  特点:  针对     (表单内form元素可以包裹) 元素的内容
			  
			 .text()				无参---功能:获取匹配元素集合中所有元素的文本内容
									有参---功能【设置】匹配元素集合中所有元素的文本
												内容替换
									特点：
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<input type="text" value="文本框真实数据" />
		<input type="text" placeholder="输入框现鼠效果[提示]" />
		<!--html: 按钮  |  下拉列表  select>option*3  需要value-->
		<!-- jq: 点击按钮，设置下拉看列表的值 | html()与val()有参是否存在区别 -->
		<button>按钮-针对html()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			//1.找到 类名为 btn1 的按钮--点击---弹窗内容p元素【无参】
			$("button").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//2.找到:类名为:btn2:的按钮--点击---lorem4\5\6 改成 修改文本
			$(".btn2").click(function(){
				$("p").text("修改文本");
			});
			
			
			
			
			//$("button").click(function(){
			//设置元素第一个的值 1.直接设置下拉列表中value的值
			//$("select").val("rem2”);
			//设置元素第一个的值2.给第一个值添加，设置的内容【本身存在】
			//var rem=$("select").val();
			
			
			//[object object] Javascript中 对象的默认字符串表示形态
			//select元素对象输出[object object]
			
			//$("button").click(function(){
				 //抓下拉列表的value值---select
				//var rem=$("select").val("rem1")
				 //value的值:真实数据 option中值：显示数据
				 //object object.测试  无参
				//alert("vale()函数有参"+rem);
			//});
			
			
			
			
			
			// 动态效果:点击按钮，获取第一个表单元素的内容，元素打印出来
			$("button").click(function(){
				/*注意:js变量名不可以为关键字！  in是关键字*/
				var ins=$("input").val();
				alert("val()函数的无参："+ins);
			});
			
			
			
			
			
			
			
			//有参:点击按钮--下面两个span:改成lorem、lorem
			$("button").click(function(){
				$("span").html("<span>lorem</span>");
			});
			
			// js变量【var i=1】==jq变量 var 变量名=值、元素
			// 无参数的     html() 函数使用
			//var html=$("span").html();
			//BOM方式 打印数据
			//alert("无参数获取第一个元素内容："+html);
		</script>
	</body>
</html>